<template>
      <div  class="thumb-example">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide  v-for="(item,index) in imgArr" :key="index" :style="item.img" style="height:350px;width:100%"></swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
        <div class="house_main">
       <happy-scroll color="gray" size="5">
       
        <div class="con">
            <div class="house_info">酒店介绍 
              <p class="house_info_p">/Hotel lntroductlon</p>
            </div>
            <div class="house_adress">
              【地理位置】 苏州新世纪大酒店,位于石路繁华商贸区,是一家四星级商务酒店,地理位置极佳,与留园、虎丘、寒山寺、山塘古街等名胜咫尺之遥,四周商店及娱乐场所林立,正是旅游、购物与夜生活区的中心所在,酒店毗邻火车站、沪宁高速公路,距虹桥机场90公里,交通快捷方便. 【酒店特色】酒店一楼设有商场、酒吧、咖啡厅,二楼设有风味餐厅,是品尝各地风味的最佳之地,而位于东区一、二楼的美食城则汇集了大江南北各式佳肴.
            </div>
            <div class="Facilities">
              配套设施
              <div class="list">/Supporting Facilities</div>
            </div>
            <div class="weddingServices">
              婚宴服务
              <div class="list">婚房赠送</div>
              <div class="list">基本音响</div>
            </div>
            <div class="current">
                通用设施
                <div class="list">高速网络</div>
                <div class="list">停车场</div>
                <div class="list">电梯</div>
                <div class="list">大堂吧</div>
                <div class="list">自动取款机</div>
                <div class="list">休息区</div>
            </div>
            <div class="traffic">
              交通服务
              <div class="list">租车服务</div>
              <div class="list">叫车服务</div>
            </div>
            <div class="Reception">
              前台服务
              <div class="list">行李寄存</div>
              <div class="list">24小时前台</div>
              <div class="list">24小时大堂</div>
              <div class="list">专职行李员</div>
              <div class="list">礼宾服务</div>
            </div>
            <div class="Catering">
              餐饮服务
              <div class="list">中餐厅</div>
            </div>
            <div class="business">
              商务服务
              <div class="list">商务中心</div>
            </div>
        </div>
      </happy-scroll>
    </div>
      </div>

</template>

<script>
export default {
  components: {},
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          type: "fraction"
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      imgArr: [
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/1.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/2.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/3.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/4.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/5.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/6.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/7.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        }
      ]
    };
  },
  mounted() {}
};
</script>

<style scoped>
@import url("../../assets/font/iconfont.css");
@import url("../../assets/css/base.css");
.thumb-example {
  /* width: 100%;
  height: 100%;
  margin-bottom: 20px; */
}
.swiper-pagination {
  color: orange;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
  width: 100%;
}

.swiper-slide .slide-1 {
  background-image: url("../../assets/images/example/1.jpg");
}
.swiper-slide .slide-2 {
  background-image: url("../../assets/images/example/2.jpg");
}
.swiper-slide .slide-3 {
  background-image: url("../../assets/images/example/4.jpg");
}
.swiper-slide .slide-4 {
  background-image: url("../../assets/images/example/5.jpg");
}
.swiper-slide .slide-5 {
  background-image: url("../../assets/images/example/6.jpg");
}

.swiper .gallery-top {
  height: 80%;
  width: 100%;
}
.swiper .gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.swiper .gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.swiper .gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
.house_main {
  width: 100%;
  height: 300px;
  background-color: #000;
  opacity: 0.9;
  color: #fff;
 
}
.con {
  margin: 20px 10px 0 8px;
  padding-bottom: 30px;
}
.house_info {
  width: 100%;
  color: #fff;
  display: flex;
  font-size: 18px;
  justify-content: flex-start;
  opacity: 1;
}
.house_info .house_info_p {
  opacity: 0.5;
  margin-left: 20px;
  font-size: 16px;
}
.con .house_adress {
  margin-top: 20px;
  text-indent: 20px;
  letter-spacing: 1px;
  font-size: 14px;
}
.Facilities {
  width: 100%;

  display: flex;
  font-size: 16px;
  justify-content: flex-start;
  opacity: 1;
  margin-top: 20px;
}
.Facilities .list{
   opacity: 0.5;
  margin-left: 20px;
  font-size: 14px;
     display:table-cell; 
  vertical-align:bottom;
}
.weddingServices {
  width: 100%;
  margin-top: 5px;
  display: flex;
  font-size: 16px;
  justify-content: flex-start;
  opacity: 1;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.weddingServices .list{
   margin-left: 20px;
  font-size: 14px;
   display:table-cell; 
  vertical-align:bottom;
}
.weddingServices .list:first-child::before{
  content:'\e671';
  font-family: "iconfont";
  margin-right: 3px;
}
.weddingServices .list:last-child::before{
  content:'\e613';
  font-family: "iconfont";
  margin-right: 3px;
}
.current {
  width: 100%;
margin-top: 15px;
  display: flex;
  font-size: 16px;
  justify-content: flex-start;
  opacity: 1;
    padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.current .list{
   margin-left: 20px;
  font-size: 14px;
   display:table-cell; 
  vertical-align:bottom;
}
.current .list:first-child::before{
  content:'\e63d';
  font-family: "iconfont";
  margin-right: 3px;
}
.current .list:nth-child(2)::before{
  content:'\e606';
  font-family: "iconfont";
  margin-right: 3px;
}
.current .list:nth-child(3)::before{
  content:'\e60c';
  font-family: "iconfont";
  margin-right: 3px;
}
.current .list:nth-child(4)::before{
  content:'\e603';
  font-family: "iconfont";
  margin-right: 3px;
}
.current .list:nth-child(5)::before{
  content:'\e600';
  font-family: "iconfont";
  margin-right: 3px;
}
.current .list:nth-child(6)::before{
  content:'\e690';
  font-family: "iconfont";
  margin-right: 3px;
}

.traffic {
  width: 100%;
margin-top: 15px;
  display: flex;
  font-size: 16px;
  justify-content: flex-start;
  opacity: 1;
    padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.traffic .list{
   margin-left: 20px;
  font-size: 14px;
   display:table-cell; 
  vertical-align:bottom;
}
.traffic .list:first-child::before{
  content:'\e8a2';
  font-family: "iconfont";
  margin-right: 3px;
}
.traffic .list:last-child::before{
  content:'\e610';
  font-family: "iconfont";
  margin-right: 3px;
}
.Reception {
  width: 100%;
margin-top: 15px;
  display: flex;
  font-size: 16px;
  justify-content: flex-start;
  opacity: 1;
    padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.Reception .list{
   margin-left: 20px;
  font-size: 14px;
   display:table-cell; 
  vertical-align:bottom;
}
.Reception .list:first-child::before{
  content:'\e642';
  font-family: "iconfont";
  margin-right: 3px;
}
.Reception .list:nth-child(2)::before{
  content:'\e61d';
  font-family: "iconfont";
  margin-right: 3px;
}
.Reception .list:nth-child(3)::before{
  content:'\e6c3';
  font-family: "iconfont";
  margin-right: 3px;
}
.Reception .list:nth-child(4)::before{
  content:'\e61b';
  font-family: "iconfont";
  margin-right: 3px;
}
.Reception .list:nth-child(5)::before{
  content:'\e615';
  font-family: "iconfont";
  margin-right: 3px;
}
.Catering {
  width: 100%;
margin-top: 15px;
  display: flex;
  font-size: 16px;
  justify-content: flex-start;
  opacity: 1;
    padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.Catering .list{
   margin-left: 20px;
  font-size: 14px;
   display:table-cell; 
  vertical-align:bottom;
}
.Catering .list:first-child::before{
  content:'\e657';
  font-family: "iconfont";
  margin-right: 3px;
}
.business {
  width: 100%;
margin-top: 15px;
  display: flex;
  font-size: 16px;
  justify-content: flex-start;
  opacity: 1;
    padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.business .list{
   margin-left: 20px;
  font-size: 14px;
   display:table-cell; 
  vertical-align:bottom;
}
.business .list:first-child::before{
  content:'\e633';
  font-family: "iconfont";
  margin-right: 3px;
}
</style>